import React from "react";
import { Text,View,StyleSheet,FlatList,RefreshControl,ActivityIndicator,Image } from "react-native";

const CITY_NAME = [{key: 'a'}, {key: 'b'},{key: 'c'},{key: 'd'}];
export default class FlatListDemo extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            isLoading:false,
            dataArray:[
                {
                    title:"人民日报",
                    date:'2018-8-9',
                },
                {
                    title:"红旗文稿",
                    date:'2018-8-9',
                },
                {
                    title:"学习参考",
                    date:'2018-8-9',
                },
                {
                    title:"晚风苑",
                    date:'2018-8-9',
                },
                {
                    title:"学习贯彻习近平新时代中国特色主义思想5",
                    date:'2018-8-9',
                },
            ]
        }
    }
    _renderItem = (item)=>{
        return (
            <View style={ styles.item }>
                <Text style={ styles.text } ellipsizeMode={"tail"} numberOfLines={1} >{ item.title }</Text>
                <Text style={ styles.textDate }>{ item.date }</Text>
            </View>
        )
    };
    //加载数据
    loadData(refreshing){
        if(refreshing){  //下拉加载
            this.setState({
                isLoading:true,
            });
        }
        setTimeout(()=>{
            let dataArray = [];
            if(refreshing){
                for(let i=this.state.dataArray.length-1;i>=0;i--){
                    dataArray.push(this.state.dataArray[i]);
                }
            }else{
                dataArray = this.state.dataArray.concat(CITY_NAME);
            }
            this.setState({
                dataArray:dataArray,
                isLoading:false,
            })
        },2000)
    }
    //上拉刷新
    genIndicator(){
        return (
            <View style={ styles.indicatorContainer }>
                <ActivityIndicator
                    style={ styles.indicator }
                    size={'small'}
                    color={'red'}
                    animating={true}
                />
                <Text style={styles.footerText}>正在加载更多</Text>
            </View>
        )
    }
    render(){
        return (
            <View style={ styles.container }>
                <FlatList
                    data={this.state.dataArray}
                    // columnWrapperStyle={{paddingLeft:10}}
                    renderItem={({item}) => this._renderItem(item)}
                    refreshControl={
                        <RefreshControl
                            title={"Loading"}
                            colors={['red']}
                            refreshing={ this.state.isLoading }
                            onRefresh={()=>{
                                this.loadData(true);
                            }}
                        />
                    }
                    ListFooterComponent={()=>this.genIndicator()}
                    onEndReached={()=>{
                        this.loadData();
                    }}
                    onEndReachedThreshold={0.1}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
        backgroundColor:'white',
    },
    item:{
        flex:1,
        marginTop: 15,
        marginLeft: 23,
        marginRight: 23,
        borderBottomWidth: .5,
        borderBottomColor:'#959595',
    },
    text:{
        marginTop: 10,
    },
    indicatorContainer:{
        flex:1,
        flexDirection:'row',
        justifyContent:'center',
        alignItems: 'center',
    },
    indicator:{
        color:'red',
        margin:10,
    },
    footerText:{
        // marginBottom: 10,
        fontSize:13,
    },
    textDate:{
        textAlign: 'right',
        marginBottom: 15,
        color:'#666666',

    }
});